<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app" class="root">
    <div :style="{fontSize:fontSize+'px'}">{{pmsg}}</div>
    <menu-item :parr="parr" @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件中传值-基本用法:
      props 传递数据原则 : 单项数据流
      1. 子组件通过自定义事件向父组件传递信息
        - <button v-on:click="$emit('enlarge-text')扩大字体</button>"
      2. 父组件监听子组件的时间
        - <menu-item v-on:enlarge-text='fontSize+=0.1 '></menu-item>
      #### 携带参数
      3. 子组件通过自定义事件向父组件传递信息
          <button v-on:click='$emit("enlarge-text",0.1)'></button>
      4. 父组件监听子组件的时间
          <menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

    */

    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key="index" v-for="(item,index) in parr">{{item}}</li>
          </ul>
          <button @click='parr.push("lemon")'>点击</button>
          <button @click='$emit("enlarge-text",5)'>扩大父组件中字体大小</button>
        </div>
      `

    });

    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中的内容',
        parr: ['apple', 'orange', 'banana'],
        fontSize:10
      },
      methods:{
        handle:function(val){
          this.fontSize += val;
        }
      }
    });
  </script>
</body>

</html>